---
title: "Range Calendar"
description: A dual-date selection component that allows users to pick a date range, commonly used for booking and scheduling.
order: 2
published: true
references: ["https://react-spectrum.adobe.com/react-aria/RangeCalendar.html#props"]
---

## Basic
A range calendar displays one or more date grids and allows users to select a range of dates.
<How toUse="date-and-time/calendar/range-calendar-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/range-calendar
```

## Composed components
<Composed components={['button']}/>

## Manual installation
```bash
npm i react-aria-components @heroicons/react
```

<SourceCode toShow='range-calendar'/>

## Controlled
The range calender can be controlled by passing the `value` prop.
<How toUse="date-and-time/calendar/range-calendar-controlled-demo" />

## Uncontrolled
The range calendar can be uncontrolled by passing the `defaultValue` prop.
<How toUse="date-and-time/calendar/range-calendar-uncontrolled-demo" />

## Examples
You can see the calendar in action within the [Date Picker](/docs/components/date-and-time/date-picker) and [Date Range Picker](/docs/components/date-and-time/date-range-picker) documentation.
